<template>
  <div>
    <div style="display: block; height: 20px"></div>
    <el-steps
      :active="active"
      finish-status="success"
      align-center
    >
      <el-step title="二维码"></el-step>
      <el-step title="图像"></el-step>
      <el-step title="识别"></el-step> </el-steps
    >
      <div style="width: 100%; position: relative">
        <div v-if="active === 0"><keep-alive><qrCode @nextStep="activePage(1)"></qrCode></keep-alive></div>
        <div v-else-if="active === 1"><keep-alive><myImage @lastStep="activePage(0)" @nextStep="activePage(2)"></myImage></keep-alive></div>
        <div v-else-if="active === 2"><keep-alive></keep-alive><myResult @lastStep="activePage(1)" @nextStep="activePage(0)"></myResult></div>
      </div>
  </div>
</template>

<script>
import qrCode from "@/components/QRCode";
import myImage from "@/components/MyImage";
import myResult from "@/components/MyResult"
import { test } from '@/http/api.js';

export default {
  name: "home",
  data() {
    return {
      active: 0,
      firstStep: true,
      lastStep: false,
    };
  },
  components: {
    qrCode,
    myImage,
    myResult,
  },
  mounted() {},
  methods: {
    t() {
      test().then(res => {
        console.log(res);
      }).catch(err => {
        console.log(err);
      });
    },
    activePage(page) {
      this.active = page;
    },
    last() {
      this.active--;

      if (this.active == 0) this.firstStep = true;
      this.lastStep = false;
    },
    next() {
      this.active++;

      if (this.active > 2) this.lastStep = true;
      this.firstStep = false;
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
